<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <style>
        #userInfoDialog {
            padding: 20px;
            width: 400px;
            display: none; /*隐藏层*/
        }

        #userInfoDialog p {
            padding: 10px 0;
        }
    </style>


</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">管理员列表</div>
        <div class="layui-card-body">
            <table id="adminlist" lay-filter="adminFilter"></table>
        </div>
    </div>
</div>
<!--用户信息对话框-->
<div id="userInfoDialog">
    <table class="layui-table">
        <tr>
            <td>用户名</td>
            <td><span id="username"></span></td>
        </tr>
        <tr>
            <td>添加时间</td>
            <td><span id="addtime"></span></td>
        </tr>
        <tr>
            <td>状态</td>
            <td><span id="status"></span></td>
        </tr>
    </table>
</div>

<script src="../res/layui/layui.js"></script>
<script>
    layui.use(function () {
        //加载获取table模块
        var table = layui.table;
        //加载获取layer弹层模块
        var layer = layui.layer;
        //加载jquery对象
        var $ = layui.jquery;
        var util = layui.util;
        
        //渲染管理员列表表格
        table.render({
            elem: '#adminlist',
            url: '/admin/list',
            page: true,
            cols: [[
                {field: 'id', title: '管理员ID', width: 80},
                {field: 'username', title: '用户名', minWidth: 120},
                {field: 'status', title: '状态', width: 80, templet: function(d) {
                    return d.status === 1 ? '<span class="layui-badge layui-bg-green">正常</span>' : '<span class="layui-badge layui-bg-red">禁用</span>';
                }},
                {field: 'createTime', title: '添加时间', width: 160, templet: function(d) {
                    return layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss');
                }},
                {title: '操作', width: 200, templet: '#rowTools', fixed: 'right'}
            ]]
        });
        
        //监听表格工具栏事件
        table.on('tool(adminFilter)', function(obj) {
            var data = obj.data;
            if (obj.event === 'details') {
                //查看详情
                layer.open({
                    type: 1,
                    title: '管理员详情',
                    content: $('#userInfoDialog'),
                    area: ['500px', '300px']
                });
                //填充详情数据
                $('#username').text(data.username);
                $('#addtime').text(layui.util.toDateString(data.createTime, 'yyyy-MM-dd HH:mm:ss'));
                $('#status').text(data.status === 1 ? '正常' : '禁用');
            } else if (obj.event === 'del') {
                //删除操作
                layer.confirm('确定要删除该管理员吗？', function(index) {
                    $.ajax({
                        url: '/admin/delete',
                        type: 'DELETE',
                        data: {id: data.id},
                        success: function(resp) {
                            if (resp.code === 0) {
                                layer.msg('删除成功', {icon: 1});
                                obj.del();
                            } else {
                                layer.msg(resp.msg || '删除失败', {icon: 2});
                            }
                        },
                        error: function() {
                            layer.msg('请求失败，请稍后重试', {icon: 2});
                        }
                    });
                    layer.close(index);
                });
            } else if (obj.event === 'updateStatus') {
                //更新状态操作
                var newStatus = $(this).data('status');
                var statusText = newStatus === 1 ? '启用' : '禁用';
                
                layer.confirm('确定要' + statusText + '该管理员吗？', function(index) {
                    $.ajax({
                        url: '/admin/setStatus',
                        type: 'PUT',
                        data: {
                            id: data.id,
                            status: newStatus
                        },
                        success: function(resp) {
                            if (resp.code === 0) {
                                layer.msg(statusText + '成功', {icon: 1});
                                //重新加载表格
                                table.reload('adminlist');
                            } else {
                                layer.msg(resp.msg || statusText + '失败', {icon: 2});
                            }
                        },
                        error: function() {
                            layer.msg('请求失败，请稍后重试', {icon: 2});
                        }
                    });
                    layer.close(index);
                });
            }
        });
        
        //添加新增管理员按钮
        $(document).ready(function() {
            //在表格上方添加新增按钮
            $('.layui-card-header').after('<div style="padding: 15px; text-align: right;"><button class="layui-btn layui-btn-normal" id="addAdminBtn">新增管理员</button></div>');
            
            //新增管理员按钮点击事件
            $('#addAdminBtn').click(function() {
                window.location.href = 'admin-add.html';
            });
        });
    });
</script>


<!--操作栏自定义模板-->
<script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">
            <i class="layui-icon layui-icon-list"></i>
            详情
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
        {{# if(d.status === 1){ }}
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="updateStatus" data-status="0">
            <i class="layui-icon layui-icon-close-fill"></i>
            禁用
        </button>
        {{# }else{ }}
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="updateStatus" data-status="1">
            <i class="layui-icon layui-icon-ok-circle"></i>
            启用
        </button>
        {{# } }}
    </div>
</script>


</body>
</html>